import backgroundAudio from '../media/background.mp3'
import '../css/normalize.css'
import '../css/main.css'


// rem
{
    const defaultWidth = 375
    const defaultFontSize = 10

    function round(value) {
        return Math.round(value * 1000) / 1000
    }

    function computeFontSize() {
        const scale = window.innerWidth / defaultWidth
        const fontSize = round(defaultFontSize * scale)
        document.documentElement.style.fontSize = `${fontSize}px`
    }

    computeFontSize()
    window.addEventListener('resize', computeFontSize)
}


// animation
{
    /** @type {HTMLElement[]} */
    const animationElements = document.querySelectorAll('[data-ani]')

    for (const el of animationElements) {
        const aniName = el.dataset.ani
        const aniDelay = el.dataset.delay
        el.style.animationDelay = aniDelay || '0s'
        el.classList.add('ani')
        el.classList.add('ani-' + aniName)
    }
}


// copywriting
{
    // search params
    const searchParams = new URLSearchParams(location.search)
    const inviteName = searchParams.get('name')
    const inviteType = searchParams.get('type')

    // 邀请称谓
    const greetName = document.getElementById('greet-name')
    const greetGeneral = document.getElementById('greet-general')
    const greetContent = document.getElementById('greet-content')

    if (inviteName) {
        greetName.innerText = `亲爱的${inviteName}`
        greetName.style.display = 'inline'
        greetGeneral.style.display = 'none'
    } else {
        greetName.style.display = 'none'
        greetGeneral.style.display = 'inline'
    }
    greetContent.style.display = 'inline'


    // 邀请文案
    const inviteWord1 = document.getElementById('invite-words-type1')
    const inviteWord2 = document.getElementById('invite-words-type2')

    if (inviteType === '1') {
        inviteWord1.style.display = 'block'
        inviteWord2.style.display = 'none'
    } else {
        inviteWord1.style.display = 'none'
        inviteWord2.style.display = 'block'
    }
}


// background audio
{
    const button = document.getElementById('music')
    const audio = document.createElement('audio')
    const play = () => {
        if (audio.muted) {
            audio.muted = false
        }
        return audio.play()
    }
    audio.onloadedmetadata = () => {
        play().catch(() => {
            document.addEventListener('click', play)
        })
    }
    audio.onplaying = () => {
        button.classList.remove('music-stop')
        document.removeEventListener('click', play)
    }
    audio.onpause = () => {
        button.classList.add('music-stop')
    }
    audio.src = backgroundAudio
    document.body.appendChild(audio)

    document.addEventListener('WeixinJSBridgeReady', () => {
        console.log('WeixinJSBridgeReady')
        play();
    })

    button.addEventListener('click', () => {
        if (audio.paused) {
            audio.play()
        } else {
            audio.pause()
        }
    })
}


// auto scroll
{
    let animationHandler
    let isScrolling
    let scrollTop

    const container = document.body
    const speed = 0.5

    scrollTop = 0
    container.scrollTo({ top: scrollTop })

    const update = () => {
        if (container.scrollTop < container.scrollHeight - container.clientHeight) {
            animationHandler = requestAnimationFrame(update)
            isScrolling = true
            scrollTop += speed
            container.scrollTo({ top: scrollTop })
        } else {
            isScrolling = false
        }
    }

    const stop = () => {
        if (animationHandler) {
            cancelAnimationFrame(animationHandler)
            animationHandler = undefined
        }
        if (isScrolling) {
            isScrolling = false
        }
    }

    setTimeout(update, 5000)

    const onTouch = () => {
        document.removeEventListener('touchstart', onTouch)
        stop()
    }
    document.addEventListener('touchstart', onTouch)
}


// background
{
    const onLoad = () => import('./bg')

    if (document.readyState === 'complete') {
        onLoad()
    } else {
        document.addEventListener('readystatechange', () => {
            if (document.readyState === 'complete') {
                onLoad()
            }
        })
    }
}
